<template>
	<div class="bookdetail">
		<div class="back">
			<div class="main">
				<header class="a">
					<button @click="goback()"><i class="el-icon-arrow-left"></i></button>
					<div class="b">书籍详情</div>
				</header>
				<div class="header">
					<div class="c">
						<img :src="'/api/public/showimg/'+detaillist.pic">
					</div>
					<p>{{detaillist.name}}</p>
					<div class="star">
						月销量：{{detaillist.salenum}}

					</div>
				</div>
				<div class="detail">
					<div class="brief">
						<div class="iofo">
							
							<p>作者：{{detaillist.author}}</p>
							<p>出版社：{{detaillist.maker}}</p>
							<p>出版时间：{{Times(detaillist.tmake)}}</p>
							<p>书本序号：{{detaillist.sn}}</p>
						</div>
						
					</div>
					
					<div class="image">
						<h3>书籍详情:</h3>
						<p>{{detaillist.info}}</p>
					</div>
				</div>
				<div class="e"><button  @click="addshopping()" >进入购物车</button></div>
				<footer>
					<p style="margin-top: 4rem;display: flex;justify-content: center;">Copyright© 2015-2025 Dianying.com</p>
				</footer>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'MobileBookDetail',
		data() {
			return {
				detaillist: [],
				bookid: 0,
				num: 0,
				show: 0,
				comments: '',
				cart: true,
				star: true
			}
		},
	computed:{
			...mapState('user', ['user'])
		},
		created() {
			this.bookid = this.$route.params.bookid;
			this.$axios.get('api/public/book/findById/' + this.bookid).then(
				(res) => {
					this.detaillist = res.data.data
					// console.log(res)
				}).catch((err) => {
				console.log(err);
			})

		},

		methods: {
			addshopping() {
				this.bookid = this.$route.params.bookid;
				if(this.user!=null){
					this.$axios.get('/api/public/addCart/' + this.bookid).then(
						(res) => {
							if(res.data=200){
								this.$message({
									message: "添加成功",
									type: "success"
								})
								console.log(res)
							}
							
						}).catch((err) => {
						console.log( err);
					})
				}else{
					this.$message({
						message: "请你登录",
						type: "success"
					})
					this.$router.push('/mobile/login')
				}
			},
			goback() {
				this.$router.go(-1);
			},
			Times(d) {
				let a = new Date(d).getTime();
				let date = new Date(a);
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';

				let dateString = Y + M + D;
				return dateString;
			}
		}
	}
</script>

<style scoped>
	.e{
		/* border: 2rem white; */
		display: flex;
		justify-content: center;
		margin-top: 3rem;
	}
	.e button{
		background-color: #f4ac93;
		border: 2px white;
		width: 10rem;
		height: 3rem;
	}
	.image{
		margin-top: 3rem;
	}
	.back{
		background-color: #fbfaca;
		height: 100%;
	}
	.star{
		margin-top: -1.5rem;
		margin-left: 26rem;
	}
	.b{
		margin-top: -1.2rem;
		display: flex;
		justify-content: center;
	}
	.a{
		width: 100%;
		background-color: #fffae8;
	}
	.c img{
		width: 100%;
		height: 20rem;
	}
</style>